<template>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(img,index) in imgs" :key="index">
               <img :src="img" @click="goImg(img)" >
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <!-- <div class="swiper-pagination"> -->

        <!-- </div> -->
        <!-- 如果需要导航按钮 -->
        <!-- <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div> -->
    </div>
</template>

<script>

import Swiper from "swiper";//引入js文件
import "swiper/css/swiper.css"; //引入css文件，这种模块化引入背后是webpack的功劳。否则用@import url()在style中引
import axios from "axios";

export default {
    name:"Banner",
    data(){
        return {
           imgs:[]
        }
    },
    created(){ 
        console.log("created函数启动")
        axios({
            url:"/bannerImgs"           
        })
        .then(res=>{
            console.log("后端响应回来了");

            this.imgs = res.data; //把后端的数据赋给了imgs；           
           
            // 当数据引起的dom发生变化后，vue会调用$nextTick里的回调函数
            this.$nextTick(()=>{
                this.createSwiper();
            });
        })
    },
    mounted(){
        console.log("mounted");
    //    this.createSwiper();// 不行的，
    },
    methods:{
        createSwiper(){
            console.log("11")
             var mySwiper = new Swiper('.swiper-container', {
                // autoplay:true,
            loop: true, // 循环模式选项
            })
        },
        goImg(img){
            // this.$router.push({path:"/ShowImg",query:{img:img}});
            this.$router.push("/ShowImg?img="+img);
        }
    }
}
</script>

<style scoped>
/* @import url("swiper/css/swiper.css"); */

.swiper-container {
  width: 100%;
  height: 2.45rem;
}

.swiper-container img {
  width: 100%;
  height: 100%;
}

/* 第一步 根目录下npm i swiper@版本号 -S
   第二步 引入模块 // import Swiper from "swiper";
   第三部引入js文件 import "../../../swiper/css/swiper.css"; 
   第四部引入css文件 在依赖文件nodemodel中，背后是webpack的功劳。
       如果引入本地模拟数据，第五步引入发送请求用的 axios模块，import axios from "axios"; 不用就原地data里写
   
   *在js中实际相当于写在window.onload=function(){}里,所以这里需要考虑时机，即在当前页面加载完成，就相当于写在monted(){}中，必须在dom元素渲染完毕后才能有操作对象*
   */

</style>
